<template>
	<view class="note-edite-page">
		<!-- wd-form不支持label-width属性，wot UI V1.10.0 -->
		<wd-form ref="formRef" :model="form" :rules="rules">

			<!-- 必填在wd-cell添加：required  prop="type"-->

			<wd-cell-group border>
				<wd-cell title="类型" center>
					<wd-radio-group v-model="form.type" inline shape="dot" cell>
						<wd-radio value="work">工作</wd-radio>
						<wd-radio value="live">生活</wd-radio>
					</wd-radio-group>
				</wd-cell>
				<wd-input label="标题" label-width="100px" prop="title" v-model="form.title" placeholder="请输入标题" />
				<view ref="textareaRef" @click="focusTextarea">
					<wd-textarea auto-height label="内容" label-width="100px" prop="content" v-model="form.content"
						placeholder="请输入内容" style="min-height: 200rpx" />
				</view>
			</wd-cell-group>
			<view class="footer">
				<wd-button type="primary" size="large" @click="onSubmit" block>提交</wd-button>
				<wd-button v-if="id" class="btn-delete" type="error" size="large" @click="onDelete" block>删除</wd-button>
			</view>

			<view class="tips">
				wot UI的表单不好用，无法简单添加label，必须配合wd-cell使用，而且高度、边框线、单选框UI均存在问题
			</view>
		</wd-form>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { Note } from '@/types/note'
	import { FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
	import { useNoteStore } from '@/stores/note';
	import { onLoad } from '@dcloudio/uni-app'

	const note = useNoteStore()//缓存
	//表单相关
	const id = ref('')
	const formRef = ref()
	const form = ref<Note>({
		id: '',
		type: 'work',
		title: '',
		content: ''
	})
	const rules = ref<FormRules>({
		type: [{ required: true, message: '请选择类型' }],
		title: [{ required: true, message: '请输入标题' }],
		content: [{ required: true, message: '请输入内容' }],
	})

	onLoad((options) => {
		id.value = options.id
		if (id) {//修改
			form.value = note.getNoteById(id.value)
		}
	})

	/** 保存 */
	async function onSubmit() {
		// 验证表单
		const { valid } = await formRef.value.validate()
		if (!valid) return

		// 判断是新增还是编辑
		if (form.value.id) {
			// 编辑
			note.updateNote({ ...form.value })
			uni.showToast({ title: '修改成功', icon: 'success' })
		} else {
			// 新增
			form.value.id = generateId()
			note.addNote({ ...form.value })
			uni.showToast({ title: '新增成功', icon: 'success' })
		}

		// 返回上一级或清空表单
		setTimeout(() => {
			uni.navigateBack()
		}, 800)
	}
	/** 生成id */
	function generateId() : string {
		return Date.now().toString(36) + Math.random().toString(36).substring(2, 10)
	}
	/** 删除 */
	function onDelete() {
		note.deleteNote(id.value)
		uni.showToast({ title: '删除成功', icon: 'success' })
		setTimeout(() => {
			uni.navigateBack()
		}, 800)
	}

	const textareaRef = ref(null)
	function focusTextarea() {
		// 获取 textarea 内部的 input 元素并聚焦
		const inputEl = textareaRef.value?.$el?.querySelector('textarea')
		inputEl?.focus()
	}
</script>

<style lang="scss" scoped>
	.note-edite-page {

		.tips {
			margin: 40rpx 20rpx;
		}

		.footer {
			padding: 20rpx;

			.btn-delete {
				margin-top: 20rpx;
			}
		}

		//处理单选框高度异常
		::v-deep .wd-radio.is-cell-radio {
			margin-left: 10px;
			padding: 3px 5px
		}

		::v-deep .wd-radio-group {
			display: flex;
			flex-direction: row-reverse;
		}
	}
</style>